<script setup lang="ts">
import { onMounted, onBeforeUnmount } from 'vue';
import { getCurrentInstance } from '@tarojs/taro';
import { state } from './state';
import ApproveProcessList from './components/approve-process-list/approve-process-list.vue';
import ApproveEditForm from './components/approve-edit-form/approve-edit-form.vue';
import { queryDetail, submit, conditionAttributeChanged, saveDraft } from './utils/approve-edit';
import { appEvents } from '/@/utils/events';
/**
 * 获取审批id
 */
const params = getCurrentInstance().router?.params as {
  id: string;
  /**
   *from: custom 来自定制页面
   *提交成功时，跳转到成功页面的时候能跳回定制页面
   */
  from?: string;
  approvedId?: string;
};

onMounted(() => {
  queryDetail(params.id, params.approvedId);
  appEvents.on('conditionAttributeChanged', () => {
    conditionAttributeChanged();
  });
});
onBeforeUnmount(() => {
  appEvents.off('conditionAttributeChanged');
});
</script>

<template>
  <view class="approve-edit app-page--1">
    <app-navbar :title="state.templateName" />
    <scroll-view class="app-page__wrapper" :scroll-y="true" :lower-threshold="100">
      <view class="approve-edit__wrapper">
        <approve-edit-form
          v-if="state.attributes && state.attributes.length > 0"
          :attributes="state.attributes"
        />
        <nut-cell-group
          v-if="state.conditionAttr && state.conditionAttr === 1 && !state.flowGraphAddFlow"
        >
          <nut-cell>
            <template #title>
              <view class="approve-edit__title"> 流程 </view>
              <view class="approve-edit__content"> 必填信息填写后，流程信息自动显示 </view>
            </template>
          </nut-cell>
        </nut-cell-group>
        <approve-process-list
          v-else-if="state.flowGraphAddFlow && Object.keys(state.flowGraphAddFlow).length > 0"
          :flow-graph-add-flow="state.flowGraphAddFlow"
        />
      </view>
    </scroll-view>
    <view class="approve-edit__footer">
      <nut-button class="approve-edit__footer-btn" color="#bbb" @click="saveDraft">
        存草稿
      </nut-button>
      <nut-button class="approve-edit__footer-btn" type="info" @click="submit(params.from)">
        提交
      </nut-button>
    </view>
  </view>
</template>

<style lang="scss">
.approve-edit {
  &__wrapper {
    padding: 20px 20px;
  }
  &__title {
    font-size: 32px;
    font-weight: bold;
  }
  &__content {
    color: #999;
    margin-top: 10px;
  }

  &__footer {
    padding: 20px 20px;
    background-color: #fff;
    display: flex;
  }
  &__footer-btn {
    flex: 1;
    margin: 0 10px;
  }
}
</style>
